<template>
  <div class="row margin-right-0 standard-bg">
    <div class="page-404">
      <div class="logo" id="a" @click="play" title="点击我有惊喜！">
        <img src="../../assets/img/404/20171216094159_QaLXP.jpeg" alt="">
      </div>
      <br/><br/>
      <div class="container" style="width: 100%;">
        <p id="roloadText">
          <span v-for="t in text" :key="t.id" class="common" :class="{top: t.show}"> {{ t.content }} </span>
        </p>
      </div>

      <div class="box bg-1">
        <button class="button button--antiman button--round-l button--text-medium"
                @click="toIndex"><span>返回首页</span></button>
      </div>
      <div class="body_bottom"></div>
      <audio ref="audio" :src="musicPath | httpPathFilter"></audio>
    </div>
  </div>

</template>

<script>
import {getHttpPath} from '../../js/my-utils'

export default {
  name: 'Error',
  data () {
    return {
      text: [
        {id: 0, show: false, content: '4'}, {id: 1, show: false, content: '0'}, {id: 2, show: false, content: '4'},
        {id: 3, show: false, content: '！'}, {id: 4, show: false, content: '网'}, {id: 5, show: false, content: '页'},
        {id: 6, show: false, content: '君'}, {id: 7, show: false, content: '找'}, {id: 8, show: false, content: '不'},
        {id: 9, show: false, content: '这'}, {id: 10, show: false, content: '个'}, {id: 11, show: false, content: '网'},
        {id: 12, show: false, content: '页'}, {id: 13, show: false, content: '了'}, {id: 14, show: false, content: '哦'},
        {id: 15, show: false, content: '.'}, {id: 16, show: false, content: '.'}, {id: 17, show: false, content: '.'}
      ],
      musicPath: '/music/acg.mp3',
      isPlay: false,
      isMuted: true,
      list: [
        {name: '第1话', no: 1},
        {name: '第1.5话', no: 1.5},
        {name: '第3话', no: 3},
        {name: '第2话', no: 2}
      ],
      items: [1, 2, 3, 5, 4]
    }
  },
  mounted () {
    // console.log(this.items.sort())

    const _this = this
    let pre = 0
    let next = 0
    setInterval(function () {
      if (next === 18) {
        next = 0
      }
      if (next === 0) {
        pre = 17
      } else {
        pre = next - 1
      }
      _this.text[pre].show = false
      _this.text[next].show = true
      next++
    }, 300)
  },
  methods: {
    play () {
      this.$refs.audio.src = getHttpPath('/music/acg.mp3')
      if (this.isPlay) {
        this.$refs['audio'].pause()
        this.isPlay = false
      } else {
        this.$refs['audio'].play()
        this.isPlay = true
      }
    },
    toIndex () {
      // 返回首页
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
#roloadText .common {
  transition: top 0.5s;
  -moz-transition:top 0.5s; /* Firefox 4 */
  -webkit-transition: top 0.5s; /* Safari 和 Chrome */
  -o-transition: top 0.5s; /* Opera */
  position:relative;
  top: 0;
}
#roloadText .top {
  top: -50px;
}
</style>
